<template>
	<view class="statistic">
		<u-toast ref="uToast"></u-toast>
		<u-no-network></u-no-network>
		<u-navbar title="激活统计">
			<view class="" slot="right" @click="goActiveStateList()">
				统计
			</view>

		</u-navbar>


		<view class="statistic__card">
			<u-cell-item @click="goMyDetail()" :title-style="{ color: '#333333' }" title="我的激活统计" :border-bottom="false"
				class="terminal__sub">

				<image class="icon mr-20" slot="icon" src="@/static/image/home/icon_line_vertical.png" />
			</u-cell-item>
			<view class="flex justify-between">
				<view class="statistic__item">
					<view class="bold">
						{{merchantData.myMerchantActivityNum}}
					</view>
					<view class="tip">
						激活用户
					</view>
				</view>
				<view class="statistic__item ">
					<view class="bold">
						{{merchantData.myMerchantRegistrationsNum}}
					</view>
					<view class="tip">
						拓展用户
					</view>
				</view>
			</view>
		</view>
		<view class="statistic__card">
			<u-cell-item @click="goAgentDetail()" :title-style="{ color: '#333333' }" title="代理的激活统计"
				:border-bottom="false" class="terminal__sub">

				<image class="icon mr-20" slot="icon" src="@/static/image/home/icon_line_vertical.png" />
			</u-cell-item>
			<view class="flex justify-between">
				<view class="statistic__item">
					<view class="bold">
						{{merchantData.agentMerchantActivityNum}}
					</view>
					<view class="tip">
						激活用户
					</view>
				</view>
				<view class="statistic__item ">
					<view class="bold">
						{{merchantData.agentMerchantRegistrationsNum}}
					</view>
					<view class="tip">
						注册用户
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				merchantData: {}

			}
		},

		mounted() {
			this.getTotalAccount();
		},
		methods: {
			getTotalAccount() {
				this.$zx.terminal_api.totalCount().then((data) => {
					console.log("data=" + JSON.stringify(data))
					this.merchantData = data;
				});
			},
			goMyDetail() {
				this.$u.route('packageB/pages/main/terminal/statisticDetail', {
					showTab: "0"
				})
			},
			goAgentDetail() {
				this.$u.route('packageB/pages/main/terminal/statisticDetail', {
					showTab: "1"

				})
			},
			goActiveStateList() {
				this.$u.route('packageB/pages/main/terminal/terminalActiveStateList')
			}
		},
	}
</script>

<style scoped lang="scss">
	.statistic {
		width: 100vw;
		height: 100vh;
		position: relative;
		padding: 10rpx;

		&__card {
			// border-radius: 10rpx;
			background-color: white;
			padding-bottom: 30rpx;
			margin: 20rpx;
		}

		&__item {
			display: flex;
			flex-direction: column;
			// width: 334rpx;
			flex: 1;
			margin: 0 30rpx;
			height: 236rpx;
			border: 1rpx solid #f6f6f6;
			border-radius: 10rpx;
			text-align: center;
			justify-content: center;

		}
	}

	.bold {
		font-size: 22px;
		font-weight: bold;

	}

	.tip {
		font-size: 12px;
		margin-top: 10rpx;
	}

	.icon {
		width: 13rpx;
		height: 36rpx;

	}
</style>